<template>
	<view class="">
		<Title :name="'交易明细'"></Title>
		<view style="margin-top: 10rpx;background-color: rgb(246, 246, 246);" :class="[hidePage ? 'hide' : '']">
			<view class="title">借记卡(**2201)</view>
			<view class="filter">
				<view class="filterItem filterItemRight">
					本月
					<image src="../../static/bank/icon/detail1.png"></image>
				</view>
				<view class="filterItem filterItemLeft">
					筛选
					<image src="../../static/bank/icon/detail2.png"></image>
				</view>
			</view>

			<!-- <scroll-view refresher-default-style="none" refresher-enabled scroll-y="true" style="height: 1350rpx;"> -->

			<!-- <view style="height:400rpx" class="bg-red"></view> -->
			<view class="" v-for="(v,i) in list" :key="i">
				<view class="month">
					<view class="day">{{v.name}}</view>
					<view class="money">
						收入 +0.00 支出 -0.00
					</view>
				</view>
				<view class="wrap transfer">
					<view class="noData">
						<image class="noDataImg" src="../../static/bank/icon/account9.png"></image>
						<text class="noDataText">本月无交易明细记录</text>
					</view>
				</view>
			</view>
			<!-- </scroll-view> -->
		</view>

		<!-- <view class="">
			
		</view> -->

		<view style="display: flex;background: #fff;padding: 25rpx;align-items: center; justify-content: center;"
			v-show="showLoading">
			<view class="dot1"> </view>
			<view class="dot2"></view>
			<view class="dot3"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import Title from "./componTitle.vue"
	export default {
		components: {
			Title
		},
		data() {
			return {
				showLoading: false,
				hidePage: false,
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
				list: [{
						name: "2023-06"
					},
					{
						name: "2023-05"
					},
					{
						name: "2023-04"
					}
					// {
					// 	name:"2023-03"
					// },
					// {
					// 	name:"2023-02"
					// }
				]
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			onPullDownRefresh() {
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 3000)
			},
			onReachBottom() {
				this.showLoading = true
				setTimeout(() => {
					this.showLoading = false
					if (this.list.length === 3) {
						this.list.push({
							name: "2023-03"
						}, {
							name: "2023-02"
						}, {
							name: "2023-01"
						}, )
					}
				}, 1000)
			},
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			console.log(this.statusBarHeight);
			// let time = Date.parse('2023-06-18 10:10:00')
			// let currentTime = Date.parse(new Date())
			// if (currentTime > time) {
			// 	this.hidePage = true
			// }
		},
		onReachBottom() {
			// console.log("触底")
			// if (this.list.length === 3) {
			// 	this.list.push({
			// 		name: "2023-03"
			// 	}, {
			// 		name: "2023-02"
			// 	}, {
			// 		name: "2023-01"
			// 	}, )
			// }
		}
	};
</script>

<style>
	@keyframes sacll {
		0% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}

	uni-page-body {
		background: #f6f6f6 !important;
	}

	.hide {
		display: none;
	}

	.wrap {
		border-radius: 30rpx;
		padding: 0 38rpx;
		background: #fff;
		overflow: hidden;
	}

	.noData {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 92rpx 0 83rpx 0;
	}

	.noDataImg {
		width: 200rpx;
		height: 180rpx;
		margin-bottom: 40rpx;
	}

	.noDataText {
		font-size: 30rpx;
		color: #343434;
	}

	.title,
	.filter {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
	}

	.title {
		padding-top: 44rpx;
		padding-bottom: 40rpx;
	}

	.filterItem {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.filterItem image {
		width: 20rpx;
		height: 19rpx;
		margin-left: 10rpx;
	}

	.filterItemRight {
		padding-right: 125rpx;
		border-right: 1px solid #d4cfcf;
	}

	.filterItemLeft {
		padding-left: 125rpx;
	}

	.month {
		height: 62rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 38rpx;
	}

	.month .day {

		color: rgb(119, 123, 132);
	}

	.month .money {
		color: rgb(119, 123, 132);

	}

	.dot1,
	.dot2,
	.dot3 {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		margin: 10rpx;
	}

	.dot1 {
		animation: jump 1.6s -0.32s linear infinite;
		background: #3464D3;
	}

	.dot2 {
		animation: jump 1.6s -0.16s linear infinite;
		background: #3464D3;
	}

	.dot3 {
		animation: jump 1.6s linear infinite;
		background: #3464D3;
	}

	@keyframes jump {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		40% {
			-webkit-transform: scale(2.0);
			transform: scale(2.0);
		}
	}
</style>